<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Valto Event Gallery</title>
		<link rel="stylesheet" href="css/basic.css" type="text/css" />
		<link rel="stylesheet" href="css/galleriffic.css" type="text/css" />
		<script type="text/javascript" src="js/libs/jquery/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="js/libs/jquery/jquery.history.js"></script>
		<script type="text/javascript" src="js/libs/galleriffic/jquery.galleriffic.js"></script>
		<script type="text/javascript" src="js/libs/galleriffic/jquery.opacityrollover.js"></script>
		<!-- We only want the thunbnails to display when javascript is disabled -->
		<script type="text/javascript">
			document.write('<style>.noscript { display: none; }</style>');
		</script>
	</head>
	<body>
		<div id="page">
			<div id="container">
				<img src="res/valto.png" alt="Valto!" style="padding-bottom: 18px;"/>

				<!-- Start Advanced Gallery Html Containers -->
				<div id="gallery" class="content">
					<div id="controls" class="controls"></div>
					<div class="slideshow-container">
						<div id="loading" class="loader"></div>
						<div id="slideshow" class="slideshow"></div>
					</div>
					<div id="caption" class="caption-container"></div>
				</div>
				<div id="thumbs" class="navigation">
					<ul id="thumbs_set" class="thumbs noscript">
						
					</ul>
				</div>
				<!-- End Advanced Gallery Html Containers -->
				<div style="clear: both;"></div>
			</div>
		</div>
		<div id="footer">&copy; 2012 Valto Team | Google Workshop</div>
		<script type="text/javascript">
			function toISODateString(d){
				function pad(n){return n<10 ? '0'+n : n}
				return d.getUTCFullYear()+'-' + pad(d.getUTCMonth()+1)+'-'
				  + pad(d.getUTCDate())+'T' + pad(d.getUTCHours())+':'
				  + pad(d.getUTCMinutes())+':' + pad(d.getUTCSeconds())
			}
				
			function getQueryVariable(variable) {
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == variable) {
						return unescape(pair[1]);
					}
				}
				alert('Query Variable ' + variable + ' not found');
			}

			function getRoughStringForTimeDiff(timeDiff) {
				sec = Math.floor(timeDiff / 1000);
				min = Math.floor(sec / 60);
				hr = Math.floor(min / 60);
				days = Math.floor(hr / 24);
				
				if (days > 0){
					return days + " days ago";
				}
				else if (hr > 0){
					return hr + " hours ago";
				}
				else if (min > 0){
					return min + " minutes ago";
				}
				else {
					return sec + " seconds ago";
				}
			}
		
			var maxItems = 1000;
		
			jQuery(document).ready(function($) {
				loadAllPhotos();
			});
		
			function loadAllPhotos() {
				currentItems = 1;
				$.ajax(
					{
						url: '/event/' + getQueryVariable('id'),
						type: 'get',
						dataType: 'json',
						data: { maximum_items: maxItems, from_date: toISODateString(new Date()), order: 'recent' },
						success: function(data) {
							$("#slidesset").empty();
						
							$.each(data.recentItems, function(i,item){
								photoDate = Date.parse(item.date.substring(1, item.date.length - 2));								
								elapsed = Date.now() - photoDate;
								
								var description = "Posted by " + item.name + ", " + getRoughStringForTimeDiff(elapsed) + "."; 
								var realThumbnail = item.thumbnail;
							
								$("<li/>").attr("id", "item"+currentItems).appendTo("#thumbs_set");
								$("<a/>").attr("id", "a_"+currentItems).attr("class", "thumb").attr("name", item.name).attr("href", item.smallPhoto).attr("title", item.comment).appendTo("#item"+currentItems);
								$("<img/>").attr("src", realThumbnail).attr("style", "width:75;height:75;").attr("alt", item.comment).attr("id", "photo"+currentItems).appendTo("#a_"+currentItems);
								$("<div/>").attr("id", "c_"+currentItems).attr("class", "caption").appendTo("#item"+currentItems);
								$("<div/>").attr("id", "d_"+currentItems).attr("class", "download").appendTo("#c_"+currentItems);
								$("<a/>").attr("href", item.photo).text("Download Original").appendTo("#d_"+currentItems);
								$("<div/>").attr("class", "image-title").text(item.comment).appendTo("#c_"+currentItems);
								$("<div/>").attr("class", "image-desc").text(description).appendTo("#c_"+currentItems);
								
								currentItems++;
							});
							
							loadPluginAndSetup();
						}
					}	
				); 
			}
			
			function loadPluginAndSetup() {
				// We only want these styles applied when javascript is enabled
				$('div.navigation').css({'width' : '290px', 'float' : 'left'});
				$('div.content').css('display', 'block');

				// Initially set opacity on thumbs and add
				// additional styling for hover effect on thumbs
				var onMouseOutOpacity = 0.67;
				$('#thumbs ul.thumbs li').opacityrollover({
					mouseOutOpacity:   onMouseOutOpacity,
					mouseOverOpacity:  1.0,
					fadeSpeed:         'fast',
					exemptionSelector: '.selected'
				});
				
				// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 21,
					preloadAhead:              10,
					enableTopPager:            true,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       '#caption',
					loadingContainerSel:       '#loading',
					renderSSControls:          true,
					renderNavControls:         true,
					playLinkText:              'Play Slideshow',
					pauseLinkText:             'Pause Slideshow',
					prevLinkText:              '&lsaquo; Previous Photo',
					nextLinkText:              'Next Photo &rsaquo;',
					nextPageLinkText:          'Next &rsaquo;',
					prevPageLinkText:          '&lsaquo; Prev',
					enableHistory:             true,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 900,
					onSlideChange:             function(prevIndex, nextIndex) {
						// 'this' refers to the gallery, which is an extension of $('#thumbs')
						this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onPageTransitionOut:       function(callback) {
						this.fadeTo('fast', 0.0, callback);
					},
					onPageTransitionIn:        function() {
						this.fadeTo('fast', 1.0);
					}
				});

				/**** Functions to support integration of galleriffic with the jquery.history plugin ****/

				// PageLoad function
				// This function is called when:
				// 1. after calling $.historyInit();
				// 2. after calling $.historyLoad();
				// 3. after pushing "Go Back" button of a browser
				function pageload(hash) {
					// alert("pageload: " + hash);
					// hash doesn't contain the first # character.
					if(hash) {
						$.galleriffic.gotoImage(hash);
					} else {
						gallery.gotoIndex(0);
					}
				}

				// Initialize history plugin.
				// The callback is called at once by present location.hash. 
				$.historyInit(pageload, "advanced.html");

				// set onlick event for buttons using the jQuery 1.3 live method
				$("a[rel='history']").live('click', function(e) {
					if (e.button != 0) return true;
					
					var hash = this.href;
					hash = hash.replace(/^.*#/, '');

					// moves to a new page. 
					// pageload is called at once. 
					// hash don't contain "#", "?"
					$.historyLoad(hash);

					return false;
				});

				/****************************************************************************************/
			}
		</script>
	</body>
</html>